<template>
  <div class="bg-white rounded-lg shadow-md p-4">
    <h2 class="text-xl font-bold mb-4">热门帖子</h2>

    <div class="space-y-3">
      <div
        v-for="(post, index) in hotPosts"
        :key="post.id"
        class="flex items-start border-b border-gray-100 pb-3 last:border-b-0 last:pb-0"
      >
        <div class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center mr-3 text-gray-500 font-medium">
          {{ index + 1 }}
        </div>
        <div class="flex-1">
          <router-link
            :to="{ name: 'PostDetail', params: { postId: post.id } }"
            class="text-gray-800 hover:text-green-500 font-medium line-clamp-2 mb-1"
          >
            {{ post.title }}
          </router-link>
          <div class="flex items-center text-xs text-gray-500">
            <div class="flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span class="ml-1">{{ post.likes }}</span>
            </div>
            <div class="flex items-center ml-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              <span class="ml-1">{{ post.comments }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { hotPostData } from '@/mock/post/hotPostData';

export default {
  name: 'HotPostList',
  data() {
    return {
      hotPosts: []
    };
  },
  created() {
    this.loadHotPosts();
  },
  methods: {
    loadHotPosts() {
      // 这里模拟从API获取热门帖子数据
      // 实际应用中，应该从后端获取数据
      this.hotPosts = hotPostData;
    }
  }
};
</script>

<style scoped>
/* 限制文本行数为2行，超出显示省略号 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
